<style lang="scss" scope>
// 引入公共变量及方法
// @import '~common/scss/public/base-url.scss';
.task{
    height: auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    padding-bottom: 50px;
    box-shadow: 0 0 10px 0 #cfcfcf;
}
.cont-main {
    width: 100%;
    padding: 15px 20px 30px;
    box-sizing: border-box;
    .table-btn {
        width: 60px;
        height: 28px;
    }
    .download,
    .dis-download {
        display: inline-block;
    }
    .el-button--primary {
        background: #4578ad;
    }
}

.cont-head {
    width: 100%;
    padding: 15px 20px;
    box-sizing: border-box;
    border-bottom: 20px solid #FFF;
    .head {
        padding: 10px;
        background: #f5f5f5;
        color: #666;
        &:hover {
            color: #3C8DBC;
        }
    }
}

.per-page {
    margin-top: 40px;
}

.cont-research {
    padding-bottom: 35px;
    padding-top: 20px;
    .build {
        margin-left: 20px;
        padding: 6px 20px;
    }
}

</style>
<template>
    <div id="cmain">
        <div class="task">
            <!-- <div class="cont-research">
                <div style="float:left;">
                    <Button type="primary" size="small" class="build" @click="build">
                        <Icon type="android-add"></Icon>
                        新建任务
                    </Button>
                </div>
                <div style="float:right;">
                    查询：
                    <input type="text" style="margin-right:20px;height:30px;width:180px;" />
                </div>
            </div> -->

            <div class="cont-main" style="min-height:300px;position:relative;">
                <el-table :data="tableList" border default-expand-al="true" v-if="!isWarn" v-loading="loading" element-loading-text="数据加载中，请稍后" :height="height" :highlight-current-row="true">
                    <el-table-column type="index" min-width="5%"></el-table-column>
                    <el-table-column prop="samplecode" label="样本编号" min-width="10%">
                        <template slot-scope="scope">
                            <div style="color:#2D8cF0;cursor:pointer;" @click="routeChange(scope.row)">{{ scope.row.samplecode}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="file" label="文件名称" min-width="18%">
                        <template slot-scope="scope">
                            <tr style="white-space: nowrap; text-align: center;display:block;" v-for="list in scope.row.file" :key="list.id">{{list}}</tr>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pipeline" label="流程" min-width="18%">
                    </el-table-column>
                    <el-table-column prop="createtime" label="创建时间" min-width="11%"></el-table-column>
                    <el-table-column prop="spendtime" :formatter="foreignFlag" label="结束时间" min-width="10%"></el-table-column>
                    <el-table-column prop="status" label="状态" min-width="10%">
                        <template slot-scope="scope">
                            <a href="javascript:;" class="bian" @click="clickStatus(scope.row)">{{ scope.row.status | foreignFlag}}
                            </a>

                        </template>
                    </el-table-column>
                    <el-table-column prop="path" label="vcf文件下载" min-width="10%" v-if="this.$store.state.productId==1">
                        <template slot-scope="scope">

                             <!-- <a :href="downHttp+'/dchealth-platform/1.0/data/vcfdownload?jobid='+scope.row.jobid" download class="download" v-if="scope.row.status==99">下载</a>  -->
                            <!-- <a :href="'http://42.123.124.204:8081/dchealth-platform/1.0/data/vcfdownload?jobid='+scope.row.jobid" download class="download" v-if="scope.row.status==99">下载</a> -->
                            <a href="javascript:;" download class="download" v-if="scope.row.status==99" @click='vcfdown(scope.row.jobid)'>下载</a> 
                            <a class="dis-download" href="javascript:;" download v-else>下载</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width='10%'>
                        <template slot-scope="scope" @click="handlerBtn($event, scope.row)">
                            <Row>
                                <!-- <Col span="12" push="2">
                                 <el-button size="small" v-if="scope.row.status==99 || scope.row.status==98" disabled>终止</el-button> 
                                <el-button size="small" type="primary" name="stop" @click="handlerBtn('stop', scope.row)" v-else>终止</el-button>
                                </Col> -->
                                <Col>
                                <el-button size="small" type="primary" name="remove" @click="handlerBtn('remove', scope.row)">删除</el-button>
                                </Col>
                            </Row>
                        </template>
                    </el-table-column>
                    <div slot="empty"></div>
                </el-table>
                <div v-if='emptyShow' class='empty'>
                    <img style="display:block;float:left;" src="/static/icon/add.png" />
                    <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
                </div>
                <warn v-if="isWarn" @callback="_getTaskList"></warn>
                <!-- 分页 -->
                <div class="per-page" v-if="!isWarn">
                    <el-pagination @size-change="handleSizeChanges" @current-change="handleCurrentChanges" :current-page="currentPage" :page-sizes="[50, 100, 200, 500, 1000]" :page-size="pageSizes" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
            <!-- 删除模块提示框 -->
            <Modal v-model="removeModel" title="删除提示" width="300" :mask-closable="false">
                <p style="padding:20px;text-align:center;">您确定要删除这条任务吗？</p>
                 <div class="fastq-footer" slot='footer'>
                    <Button size="small" type="primary" @click="saveInfoClick">确定</Button>
                </div> 
            </Modal>

            <!-- 终止模块提示框 -->
            <Modal v-model="stopModel" title="终止提示" width="300" :mask-closable="false">
                <p style="padding:20px;text-align:center;">您确定要终止这条任务吗？</p>
                <div class="fastq-footer">
                    <Button size="small" type="primary" @click="saveStopInfo">确定</Button>
                </div>
            </Modal>

            <!-- 新建任务 -->
            <Modal v-model="newModel" width="835px" :mask-closable="false" @on-cancel="closeModel">
                <div class="sample-title">新建任务</div>
                <div class="sample-main">
                    <div class="stitle">
                        <span>请选择需要运行的样本批次：</span>
                        <Select style="width:50%;display:inline-block;" v-model="batchId" @on-change="changeSelect">
                            <Option v-for="item in batchlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </div>
                    <div class="sample-inner">
                        <el-table :data="sampleList" @select="handleselect" @select-all="handleselectAll" style="width: 100%;">
                            <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
                            <el-table-column label="样本编号" prop="samplecode" width="350"></el-table-column>
                            <el-table-column label="流程" prop="region" width="350"></el-table-column>
                        </el-table>
                        <div class="per-page" style="margin-top:10px;height:30px;">
                            <!-- <div style="float:left;">当前显示{{pageIndex*pageSize-19}}-{{pageIndex*pageSize}}条，共{{jobTotal}}条
                            </div> -->
                            <div style="float:right;">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleChangPage" :current-page="pageIndexModel" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="jobTotal">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                    <div class="sample-footer">
                        <Button type="ghost" style="margin-left:205px;" @click="onCanel">取消</Button>
                        <Button type="primary" style="margin-left:0px;" @click="submitFormData" :disabled="disSubmit">提交</Button>
                    </div>
                </div>
            </Modal>
            <!-- 执行失败错误提示框 -->
            <Modal v-model="failMassageModel" width="620" :mask-closable="false">
                <div class="sample-title">失败信息</div>
                <div align="center" style="font-size:20px;height:150px;line-height:150px;" class="sample-block">
                    {{failMassage}}
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
// 引入任务管理方法
import {
    task,tumourTask
} from 'api/index.js'
import { getCookie } from '@/common/js/cookie.js'
// 引入公共操作函数
import warn from "@/components/warn.vue";
import { editArrayRow, removeArrayRow, httpUrl } from 'common/js/Base.js';
// 组件实例
export default {
    name: "task",
    data() {
        return {
            isWarn: false,
            emptyShow: false,
            loading:false,         //加载loading
            currentPage: 1,         //当前页数
            height: '500',
            more: '',
            routes: '',
            path: '',
            downHttp: httpUrl.downHttp, //下载地址
            disSubmit: true, //提交按钮禁用
            loading: true,
            tableList: [],            // 表格数组
            openEditModel: false,      // 弹层显隐
            formInfo: {},              // 表单数据
            cookies: getCookie('userid'),             // cookies
            nowEditInfo: null,
            removeModel: false,        // 删除弹层
            stopModel: false,         // 终止
            btnType: null,
            pageIndexModel: 1,   // 弹层当前页
            pageSize: 20,
            pageSizes: 50,
            pageIndex: 1,
            pageIndexs: 1,
            jobTotal: 0,      // 新建总数
            total: 0,
            newModel: false,    //新建任务弹层
            failMassageModel: false, //执行失败弹出窗
            failMassage: "",         //执行失败信息
            batchlist: [],      // 样本批次列表
            batchId: '',        // 批次选中项
            sampleList: [],     // 样本列表
            selectList: [],     // 样本选中项
            tabledata: [],
            tabsdata: [],        //选项卡内容
        }
    },
    // directives: {  //监听滚动
    //     scroll: {
    //         bind: function (el, binding){
    //             var ele=el.querySelector('.el-table__body-wrapper');
    //             ele.addEventListener('scroll', function(){
    //                 if(this.scrollTop + this.clientHeight >= this.scrollHeight) {
    //                     let fnc = binding.value; 
    //                     fnc();
    //                 }
    //             })
    //         }
    //     }
    // },
    filters: {
        // 格式化数据
        foreignFlag(cellValue) {
            if (cellValue == '1') {
                return cellValue = "等待"
            } else if (cellValue == '2' || cellValue == '3') {
                return cellValue = "正在运行"
            } else if (cellValue == '99') {
                return cellValue = "运行完成"
            }
            else if (cellValue == '98') {
                return cellValue = "运行失败"
            }
        },
    },
    components:{
        warn
    },
    //
    mounted() {

    },
    // 实例创建时
    created() {
        this._getTaskList();
        // if (this.$store.state.taskManageMenuList.length > 0) {
        //     this.tabsdata = M.clone(this.$store.state.taskManageMenuList);
        //     this.$store.state.productId = this.tabsdata[0].productId;
        //     this._getTaskList();
        // } else {
        //     let obj = {
        //         "menuName": "罕见病",
        //         "productId": "1"
        //     }
        //     this.tabsdata.push(obj);
        //     this.$store.state.productId = this.tabsdata[0].productId;
        //     this._getTaskList();
        // }
    },
    // watch: {
    //     '$route'(to, from) {
    //         //刷新参数放到这里里面去触发就可以刷新相同界面了
    //         console.log(this.$route.path);
    //         this.$store.state.productId =M.url().product ? M.url().product : "1";
    //         this._getTaskList();      
    //     }
    // },
    methods: {
        vcfdown(jobid){
            let obj={
                jobid:jobid
            }
            let taskUrl = task;
            if(this.$store.state.productId == 3){
                taskUrl = tumourTask;
            }
            taskUrl.vcfdownload(obj).then((data)=>{
                if(data.returnCode==200){
                    let downurl=data.data;
                    this.downloadFile(downurl)
                }else{
                    this.$Message.error(data.msg)
                }
            })
        },
        downloadFile(url) {
            try{
                var elemIF = document.createElement('iframe');
                elemIF.src = url;
                elemIF.style.display = 'none';
                document.body.appendChild(elemIF);
                // 防止下载两次
                setTimeout(function() {
                   document.body.removeChild(elemIF)
                }, 1000);
            }catch(e){
                console.log(e);
                this.$Message.error('下载失败')
            }
        },
        //每页显示改变
        handleSizeChanges(val) {
            this.pageSizes = val;
            this._getTaskList();
        },
        //页码改变
        handleCurrentChanges(val) {
            this.pageIndexs = val;
            this._getTaskList();
        },
        // 点击状态
        clickStatus(row) {
            console.log(row)
            this.$store.state.jobid = row.jobid;
            this.$store.state.file = row.file.join(',');
            this.$store.state.pip = row.pipeline;
            this.$store.state.path = row.path;
            console.log(this.$store.state.file)
            if (this.$store.state.productId == 1 || this.$store.state.productId == 2) {
                this.$router.push('/task/process')
            } else if (this.$store.state.productId == 3) {
               this.$router.push('/tumour/process')
            }
        },
        // tabs切换
        choice(name) {
            this.$store.state.productId = name
            this._getTaskList();
            this.batchlist = [];
            this.sampleList = [];
            this.jobTotal = 0;
        },
        //点击样本编号
        routeChange(row) {
            console.log(row)
            this.$store.state.sampleInfo.samplecode = row.samplecode;
            if (row.status == 99) {
                this.$store.state.jobid = row.jobid;
                if (this.$store.state.productId == 1 || this.$store.state.productId == 2) {
                    this.$router.push({ path: '/task/task-details?type=quality' })
                } else if (this.$store.state.productId == 3) {
                    this.$router.push({ path: '/tumour/task-details?type=quality' })
                }
            } else if (row.status == 98) {
                this.$Message.error("该任务运行失败")
            } else {
                this.$Message.warning("该任务正在运行")
            }

        },
        //获取样本批次
        _getBatchList() {
            let obj = {
                "userid": getCookie("userid"),
                "productId": this.$store.state.productId
            }
            // 置空批次列表
            this.batchlist = [];
            task.getBatchList(obj).then((data) => {
                // console.log(data)
                if (data.returnCode == 0 || data.returnCode == 200) {
                    M.each(data.data, (item, index) => {
                        var result = {};
                        if (item) {
                            result.value = item;
                            result.label = item;
                            this.batchlist.push(result);
                        }
                    })
                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg)
                }
            }).catch((error) => {
                this.$Message.error(data.msg)
            })
        },
        // 样本批次改变
        changeSelect(val) {
            this.batchId = val;
            this.sampleList = [];
            this.jobTotal = 0;
            // 获得样本列表
            if (this.batchId != '') {
                this.getSampleList();
            }
        },
        //根据样本批次，获取样本列表
        getSampleList(pageIndexModel = 1) {
            this.pageIndexModel = pageIndexModel;
            let obj = {
                batchId: this.batchId,
                pageSize: this.pageSize,
                pageIndex: pageIndexModel,
                userid: getCookie('userid'),
                productId: this.$store.state.productId
            }
            // console.log(obj);
            task.getSampleByBatchId(obj).then((data) => {
                console.log(data)
                if (data.returnCode == 0 || data.returnCode == 200) {
                    if (data.data == null || data.data == "null") {
                        this.$Message.error(data.msg);
                        this.jobTotal = 0;
                    } else {
                        //取消所有的所中
                        this.selectList = [];
                        this.sampleList = data.data.sampleList;
                        this.jobTotal = data.data.count;
                    }
                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg)
                }

            })
        },
        //是否可以勾选
        selectable(row, index) {
            if (row.sampleststus == '6') {
                return true;
            } else {
                return false;
            }
        },
        //选择
        handleselect(val) {
            console.log(val);
            //每次选择之前先清空所选中的列表
            this.selectList = [];
            M.each(val, (item, index) => {
                this.selectList.push(item.sampleid);
            })
            if (val.length == 0) {
                this.disSubmit = true;
            } else {
                this.disSubmit = false;
            }
        },
        // 全选
        handleselectAll(val) {
            M.each(val, (item, index) => {
                this.selectList.push(item.sampleid);
            })
            if (val.length == 0) {
                this.disSubmit = true;
                this.selectList = [];
            } else {
                this.disSubmit = false;
            }
        },
        // 弹层关闭
        closeModel() {
            // 弹层关闭重置批次列表
            this.batchlist = [];
            this.sampleList = [];
            this.jobTotal = 0;
        },
        // 取消
        onCanel() {
            this.newModel = false;
            // 取消-弹层关闭重置批次列表
            this.batchlist = [];
            this.sampleList = [];
            this.jobTotal = 0;
        },
        //提交-成功后提交过得样本不可选
        submitFormData() {
            let obj = {
                "sampleIds": this.selectList,
                'userId': getCookie('userid'),
                "productId": this.$store.state.productId
            }
            console.log(obj);
            task.executeJobBySampleIds(obj).then((data) => {
                console.log(data)
                if (data.returnCode == 0 || data.returnCode == 200) {
                    // this.newModel=false;
                    // 提示信息
                    this.$Message.success(data.msg);
                    // 重新渲染样本列表
                    this.getSampleList(this.pageIndex);
                    // 重新渲染列表
                    this._getTaskList();
                    // 提交完成清空数组
                    this.selectList = [];
                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg)
                }

            })
        },
        //新建任务
        build() {
            this.newModel = true;
            this._getBatchList();
        },
        // 表格操作按钮
        handlerBtn(type, row) {
            this.nowEditInfo = M.clone(row) || {};
            // 设置当前操作类型
            this.btnType = type;
            if (type == "stop") {
                this.stopModel = true;
            } else if (type == "remove") {
                this.removeModel = true;
            }
        },
        // 删除
        saveInfoClick() {
            let isRemove = this.btnType === 'remove';
            // 需要删除的数据
            let idList = [];
            idList.push(this.nowEditInfo.jobid);
            let obj = {
                userId: this.cookies,
                idList: idList,
                productId: this.$store.state.productId
            };
            let taskUrl = task;
            if(this.$store.state.productId == 3){
                taskUrl = tumourTask;
            } 
            taskUrl.mergeJobById(obj).then((data) => {
                if (data.returnCode == 0 || data.returnCode == 200) {
                    if (isRemove) {
                        this._getTaskList();
                        this.removeModel = false;
                        this.$Message.success("删除成功！");
                    }
                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg)
                }
            })
        },
        // 终止
        saveStopInfo() {
            let isStop = this.btnType === 'stop';
            let idList = [];
            idList.push(this.nowEditInfo.jobid);
            let obj = {
                userId: this.cookies,
                idList: idList,
                productId: this.$store.state.productId
            };
            task.mergeStopJob(obj).then((data) => {
                if (data.returnCode == 0 || data.returnCode == 200) {
                    if (isStop) {
                        this._getTaskList();
                        this.stopModel = false;
                        this.$Message.success("终止任务成功！");
                    }
                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg)
                }
            })
        },
        // 每页显示条数改变
        handleSizeChange(val) {
            this.pageSize = val;
            // 每页显示条数改变
            this.getSampleList();
        },
        // 页码改变
        handleCurrentChange(val) {
            this.pageIndex = val;
            console.log(this.pageIndex);
            this.getSampleList();
        },
        // 弹层页面改变
        handleChangPage(val) {
            this.pageIndexModel = val;
            console.log(this.pageIndexModel);
            // 页码改变后调用方法
            this.getSampleList(val);
        },
        // 获得表格数据
        _getTaskList() {
            let obj = {
                "pageIndex": this.pageIndexs,
                "pageSize": this.pageSizes,
                "userId": this.cookies,
                "productId": this.$store.state.productId
            }
            console.log(obj)
            this.tableList = [];
            this.loading = true;
            var taskUrl = task;
            if(this.$store.state.productId == 3){
                taskUrl = tumourTask;
            }
            taskUrl.getTaskList(obj).then((data) => {
                if (data.returnCode == 0 || data.returnCode == 200) {
                    if (data.data == "null" || data.data == null) {
                        this.$Message.error(data.msg);
                        this.tableList = [];
                    } else {
                        this.total = data.data.count;
                        this.tableList = data.data.jobList;
                    }
                    this.loading = false;
                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg);
                    this.loading = false
                }
                this.isWarn = false;
                if (this.tableList == null || this.tableList.length == 0) {
                    this.emptyShow = true;
                } else {
                    this.emptyShow = false;
                }
            }).catch((error) => {
                this.isWarn = true;
                this.loading = false;
            })
        },
        //格式化表格数据（结束时间）
        foreignFlag(row, column, cellValue) {
            if (cellValue == '0') {
                return cellValue = "— —"
            } else if (cellValue != '0') {
                return cellValue = cellValue;
            }
        },
        //获取执行失败信息
        doGetJobError(row) {
            console.log(row);
            this.failMassageModel = true;
            let obj = {
                "userId": this.cookies,
                "jobId": row.jobid
            }
            task.getJobErrorById(obj).then((data) => {
                console.log(data);
                if (data.returnCode == 1) {
                    if (data.data == null || data.data == "") {
                        this.failMassage = "任务失败，请联系管理员！"
                    } else {
                        this.failMassage = data.data;
                    }
                }
            }).catch((error) => {
                this.failMassage = error.statusText;
            })
        }
    }
}

</script>